/* eslint-disable */
<template>
	<div class="moduleManage">
		<!--模块树形结构-->
		<el-row class="moduleTree">
			 <el-col :span="12">
			 	<div class="divide" >
			 		{{$t('modules.moduleManage.moduleDetail')}}
			 		<!--操作区域-->
					<el-checkbox style="float:right;" v-model="currentState"  @change="switchStatus">{{$t('modules.moduleManage.showAllStatus')}}</el-checkbox>
			 	</div>
			 	<div class="addsubSys">
			 		<span>{{systemInfo.systemName}}</span>
			 		<span class="btn"  @click="addnew()" >{{$t('common.add')}}</span>
			 	</div>
			 	<div  class="border-box left">
			 		<el-tree ref="tree"  :data="treeData"   node-key="moduleId"   :render-content="renderContent" :check-strictly="true"  @node-click="handleNodeClick"
			 			  highlight-current :expand-on-click-node="false" v-loading="loadind"    :props="defaultProps" ></el-tree>
			 	</div>
			 </el-col>
			 <el-col :span="12">
			 	<div class="divide">{{$t('modules.moduleManage.moduleBaseInfo')}}</div>
			 	<div class="border-box right">
			 		<el-form :rules="rules"  :inline="false" :model="moduleForm" ref="moduleForm" label-width="120px">
						<el-form-item :label="$t('common.subsysName')+'：'" >
							<el-input disabled   v-model="moduleForm.subsysName" :placeholder="$t('common.inputPlaceholder')"></el-input>
						</el-form-item>
						<el-form-item :label="$t('common.parentId')+'：'"  >
							<el-input  disabled v-model="moduleForm.parentId" :placeholder="$t('common.inputPlaceholder')"></el-input>
						</el-form-item>
						<el-form-item :label="$t('common.moduleId')+'：'" >
							<el-input  disabled v-model="moduleForm.moduleId" :placeholder="$t('common.inputPlaceholder')"></el-input>
						</el-form-item>
						<el-form-item :label="$t('common.moduleCode')+'：'"   prop="moduleCode">
							<el-input :disabled="moduleForm.moduleType==1"  v-model="moduleForm.moduleCode" :placeholder="$t('common.inputPlaceholder')"></el-input>
						</el-form-item>
						<el-form-item :label="$t('common.moduleName')+'：'"   prop="moduleName">
							<el-input   v-model="moduleForm.moduleName" :placeholder="$t('common.inputPlaceholder')"></el-input>
						</el-form-item>
						<el-form-item :label="$t('common.moduleIcon')+'：'" >
							<el-input   v-model="moduleForm.moduleIcon" :placeholder="$t('common.inputPlaceholder')"></el-input>
						</el-form-item>
						<el-form-item :label="$t('common.moduleDesc')+'：'"  prop="moduleDesc">
							<el-input  type="textarea" :rows="2" v-model="moduleForm.moduleDesc" :placeholder="$t('common.inputPlaceholder')"></el-input>
						</el-form-item>
						<el-form-item :label="$t('common.moduleType')+'：'" prop="moduleType">
							<el-select disabled v-model="moduleForm.moduleType" :placeholder="$t('common.selectPlaceholder')" >
								<el-option v-for="(item,index) in moduleTypeDic" :key="index" :label="item.label" :value="item.value"></el-option>
							</el-select>
						</el-form-item>
						<el-form-item :label="$t('common.hidden')+'：'" prop="hidden">
							<template>
								<el-radio v-model="moduleForm.hidden" label="N">{{$t('common.not')}}</el-radio>
								<el-radio v-model="moduleForm.hidden" label="Y">{{$t('common.is')}}</el-radio>
							</template>
						</el-form-item>
						<el-form-item :label="$t('common.actionUrl')+'：'" >
							<el-input v-model="moduleForm.actionUrl" :placeholder="$t('common.inputPlaceholder')"></el-input>
						</el-form-item>
						<el-form-item :label="$t('common.helpUrl')+'：'" >
							<el-input v-model="moduleForm.helpUrl" :placeholder="$t('modules.moduleManage.helpUrlPlaceholder')"></el-input>
						</el-form-item>
						<el-form-item :label="$t('common.sort')+'：'" prop="sort">
							<el-input    v-model.number="moduleForm.sort" :placeholder="$t('common.inputPlaceholder')"></el-input>
						</el-form-item>
					</el-form>
			 	</div>
			 	<div class="submitUpdate" :span="24">
			 		<el-button type="primary"  v-loading.fullscreen.lock="fullscreenLoading"  @click="submitUpdate" v-if="moduleForm.moduleId && moduleForm.moduleStatus==1 ">{{$t('modules.moduleManage.modify')}}</el-button>
			 	</div>
			 </el-col>
		</el-row>
		<!--新增修改-->
		<el-dialog class="newlyForm" :title="dialogTitle==1?$t('modules.moduleManage.createSubSys'):$t('modules.moduleManage.createSubModule')" :visible.sync="newlyFormVisible" :close-on-click-modal="false"  width="50%" @close="closeDialog">
			<el-row>
			  <el-col :span="22">
			  		<el-form :rules="rules"  :inline="false" :model="dataSourceRow" ref="dataSourceRow" label-width="120px">
						<el-form-item :label="$t('common.subsysName')+'：'" v-show="dialogTitle!=1">
							<el-input disabled   v-model="dataSourceRow.subsysName" placeholder="系统创建"></el-input>
						</el-form-item>
						<el-form-item :label="$t('common.moduleCode')+'：'"  prop="moduleCode">
							<el-input :maxlength="64"  v-model="dataSourceRow.moduleCode" @change="dataSourceRow.moduleCode=$checkTextValidate(dataSourceRow.moduleCode)"   placeholder="如：88888888+moduleCodeDemo"></el-input>
						</el-form-item>
						<el-form-item :label="$t('common.moduleName')+'：'" prop="moduleName">
							<el-input :maxlength="128"  v-model="dataSourceRow.moduleName" @change="dataSourceRow.moduleName=$checkTextValidate(dataSourceRow.moduleName)"   :placeholder="$t('common.inputPlaceholder')"></el-input>
						</el-form-item>
						<el-form-item :label="$t('common.moduleIcon')+'：'">
							<el-input   v-model="dataSourceRow.moduleIcon" :placeholder="$t('common.inputPlaceholder')"></el-input>
						</el-form-item>
						<el-form-item :label="$t('common.moduleDesc')+'：'"  prop="moduleDesc">
							<el-input :maxlength="128" type="textarea" :rows="2" @change="dataSourceRow.moduleDesc=$checkTextValidate(dataSourceRow.moduleDesc)"   v-model="dataSourceRow.moduleDesc" :placeholder="$t('common.inputPlaceholder')"></el-input>
						</el-form-item>
						<el-form-item :label="$t('common.moduleType')+'：'" prop="moduleType" v-if="dialogTitle!=1">
							<el-select  v-model="dataSourceRow.moduleType"  :placeholder="$t('common.selectPlaceholder')" >
								<template v-for="(item,index) in moduleTypeDic">
									<el-option v-if="dialogTitle!=2 || item.value!=1"  :key="index" :label="item.label" :value="item.value"></el-option>		
								</template>
							</el-select>
						</el-form-item>
						<el-form-item :label="$t('common.hidden')+'：'" prop="hidden">
							<template>
								<el-radio v-model="dataSourceRow.hidden" label="N">{{$t('common.not')}}</el-radio>
								<el-radio v-model="dataSourceRow.hidden" label="Y">{{$t('common.is')}}</el-radio>
							</template>
						</el-form-item>
						<el-form-item :label="$t('common.actionUrl')+'：'" >
							<el-input v-model="dataSourceRow.actionUrl" :placeholder="$t('common.inputPlaceholder')"></el-input>
						</el-form-item>
						<el-form-item :label="$t('common.helpUrl')+'：'" >
							<el-input v-model="dataSourceRow.helpUrl" :placeholder="$t('modules.moduleManage.helpUrlPlaceholder')"></el-input>
						</el-form-item>
						<el-form-item :label="$t('common.sort')+'：'" prop="sort">
							<el-input    v-model.number="dataSourceRow.sort" :placeholder="$t('common.inputPlaceholder')"></el-input>
						</el-form-item>
					</el-form>
			  </el-col>
			</el-row>
			<div slot="footer" class="dialog-footer">
				<el-button @click="giveupFun('newlyFormVisible')">{{$t('common.giveUp')}}</el-button>
				<el-button type="primary" @click="submitForm">{{$t('common.save')}}</el-button>
			</div>
		</el-dialog>
	</div>
</template>
<script>
import {
    Message, Notification, MessageBox, Loading
} from 'element-ui'
export default {
		name: 'moduleManage',
    data () {
        return {
            seeTree: true,
            currentState: false,
            dataSourceRow: {
                moduleDesc: "",
                moduleCode: "",
                moduleId: '',
                moduleName: "",
                moduleIcon: '',
                sort: '',
                moduleStatus: 1,
                parentId: "",
                subsysCode: "",
                subsysName: "",
                moduleType: '',
                actionUrl: "",
                helpUrl: '',
                hidden: ''
            },
            arrowActive: false,
            moduleForm: {
                moduleDesc: "",
                moduleCode: "",
                moduleId: '',
                moduleName: "",
                moduleIcon: '',
                sort: '',
                moduleStatus: 1,
                parentId: "",
                subsysCode: "",
                subsysName: "",
                moduleType: '',
                actionUrl: "",
                helpUrl: '',
                hidden: ''
            },
            rules: {
                moduleCode: [
		            { required: true, message: this.$t('validateWornText.inputModuleCode'), trigger: 'blur' }
		        ],
		        moduleName: [
		            { required: true, message: this.$t('validateWornText.inputModuleName'), trigger: 'blur' }
		        ],
		        moduleDesc: [
		            { required: true, message: this.$t('validateWornText.inputModuleDesc'), trigger: 'blur' }
		        ],
                moduleType: [
		            { required: true, message: this.$t('validateWornText.inputModuleType'), trigger: 'change' }
		        ],
		        hidden: [
		            { required: true, message: this.$t('validateWornText.inputHidden'), trigger: 'change' }
		        ],
		        sort: [
			      { required: true, message: this.$t('validateWornText.inputSortEmpty') },
			      { type: 'number', message: this.$t('validateWornText.inputSortNum') }
			    ]
            },
            uploadStatus: '',
            moduleTypeDic: [{ value: 1, label: this.$t('modules.moduleManage.subSys') }, { value: 2, label: this.$t('modules.moduleManage.bussinessModule') },
                { value: 3, label: this.$t('modules.moduleManage.menuModule') }, { value: 4, label: this.$t('modules.moduleManage.btnModule') }, { value: 5, label: this.$t('modules.moduleManage.interfacetype') }],
            dataList: [],
            loadind: false,
            fullscreenLoading: false,
            dialogTitle: 1,
            newlyFormVisible: false,
            treeData: [],
	        defaultProps: {
	          children: 'childs',
	          label: 'moduleName'
	        },
	        systemInfo:{},
        }
    },
    beforeCreate () {
    },
    mounted () {
    	this.searchSystemInfo()
    	this.searchModuleNode()
    },
    methods: {
    	async searchSystemInfo(){
    		this.systemInfo = await this.$getSystemInfo()
    	},
        searchModuleNode () {
            var urlH = "/dev-basp-system/module/selectModule"
            var param = {
                status: this.currentState === true ? 0 : 1
            }
	        this.loadind = true
            var that = this
            this.$httpExt().post(urlH, param)
                .then((response) => {
                    that.loadind = false
                    var body = response.result
                    that.treeData = body
                }, (response) => {
                    this.loadind = false
                    Notification.error({
                        title: this.$t('common.exception'),
                        message: response.msg ? response.msg : this.$t('common.exceptionWornText')
                    })
                })
	    },
        switchStatus (val) { // 切换启用禁用状态
            this.searchModuleNode()
        },
	    handleNodeClick (data) {
	    	this.moduleForm = {
                moduleDesc: data.moduleDesc,
                moduleCode: data.moduleCode,
                moduleId: data.moduleId,
                moduleName: data.moduleName,
                moduleIcon: data.moduleIcon,
                sort: data.sort,
                moduleStatus: data.status,
                parentId: data.parentId,
                subsysCode: data.subsysCode,
                moduleType: data.moduleType,
                actionUrl: data.actionUrl,
                helpUrl: data.helpUrl,
                hidden: data.hidden,
                subsysName: data.subsysName
            }
	    },
	    append (data) {
	       this.addModule(data)
	    },
	    transformStatus (node, data) { // 禁用子系统：逻辑删除
	    	if (data.status == 1) { // 禁用需要二次确认
	    		this.$confirm(this.$t('modules.moduleManage.disabledTip'), this.$t('common.tip'), {
		          	confirmButtonText: this.$t('common.submitOption'),
	          		cancelButtonText: this.$t('common.cancelOption')
		        }).then(() => {
		        		this.httpTransformStatus(node, data)
		        }).catch(() => {
		        })
	    	} else {
	    		this.httpTransformStatus(node, data)
	    	}
	    },
	    httpTransformStatus (node, data) { // 启用禁用
	    	var urlH = '/dev-basp-system/module/state'
            var param = [{
                moduleId: data.moduleId,
                moduleType: data.moduleType,
                status: data.status == 0 ? 1 : 0
            }]
            this.$httpExt().post(urlH, param)
                .then((response) => {
                    this.$message({
			          message: response.msg ? response.msg : this.$t('modules.moduleManage.operateSucess'),
			          type: 'success'
			    })
                    this.searchModuleNode()
                }, (response) => {
                    Notification.error({
                        title: this.$t('common.exception'),
                        message: response.msg ? response.msg : this.$t('common.exceptionWornText')
                    })
                })
	    },
	    renderContent (h, { node, data, store }) {
	    	if (data.moduleType === 4) {
	    		 return (
		          <span style="flex: 1; display: flex; align-items: center; justify-content: space-between; font-size: 14px; padding-right: 8px;">
		            <span>
		              <span>{node.label}</span>
		            </span>
		            <span>
		              <el-button style="font-size: 12px;" type="text" on-click={ () => this.transformStatus(node, data) }>{data.status == 0 ? this.$t('modules.moduleManage.enabled') : this.$t('modules.moduleManage.disabled')}</el-button>
		            </span>
		          </span>)
	    	} else {
	    		 return (
		          <span style="flex: 1; display: flex; align-items: center; justify-content: space-between; font-size: 14px; padding-right: 8px;">
		            <span>
		              <span>{node.label}</span>
		            </span>
		            <span>
		              <el-button class="btn" style="font-size: 12px;" type="text" on-click={ () => this.transformStatus(node, data) }>{data.status == 0 ? this.$t('modules.moduleManage.enabled') : this.$t('modules.moduleManage.disabled')}</el-button>
		              <el-button class="btn" style="font-size: 12px;" type="text" on-click={ () => this.append(data) }>添加</el-button>
		            </span>
		          </span>)
	    	}
	    },
        resetForm (param) {
            this.$refs[param].resetFields()// 重置表单
            var obj = {
                moduleDesc: "",
                moduleCode: "",
                moduleId: '',
                moduleName: "",
                moduleIcon: "",
            	sort: "",
                moduleStatus: 1,
                parentId: "",
                subsysCode: "",
                subsysName: '',
                moduleType: '',
                actionUrl: "",
                helpUrl: '',
                hidden: ''
            }
            if (param == 'dataSourceRow') {
                this.dataSourceRow = obj
            } else {
                this.moduleForm = obj
            }
        },
	    closeDialog () { // 关闭新增，修改模态框
            this.resetForm('dataSourceRow')
            this.newlyFormVisible = false
            this.moduleTypeDic = [{ value: 1, label: this.$t('modules.moduleManage.subSys') }, { value: 2, label: this.$t('modules.moduleManage.bussinessModule') },
                { value: 3, label: this.$t('modules.moduleManage.menuModule') }, { value: 4, label: this.$t('modules.moduleManage.btnModule') }, { value: 5, label: this.$t('modules.moduleManage.interfacetype') }]
	    },
	    // 新增子系统
	    addnew () {
	    	if (this.systemInfo.status == 0) {
	    		this.$message({
			          message: this.$t('modules.moduleManage.currentDisabledTip'),
			          type: 'warning'
			    })
	    		return
	    	}
	    	this.dialogTitle = 1
	    	this.dataSourceRow.parentId = 0
	    	this.dataSourceRow.moduleType = 1
	    	this.newlyFormVisible = true
	    },
	    addModule (data) { // 添加子模块
	    	if (this.systemInfo.status == 0) { // 判断系统状态
	    		this.$message({
			          message: this.$t('modules.moduleManage.currentDisabledTip'),
			          type: 'warning'
			    })
	    		return
	    	}
	    	if (data.status == 0) { // 判断当前模块节点状态
	    		this.$message({
			          message: this.$t('modules.moduleManage.currentModuleDisabledTip'),
			          type: 'warning'
			    })
	    		return
	    	}
	    	this.dialogTitle = 2
    		this.newlyFormVisible = true
    		this.dataSourceRow.parentId = data.moduleId
    		this.dataSourceRow.subsysCode = data.subsysCode
    		this.dataSourceRow.subsysName = data.subsysName
    		if (data.moduleType === 1) {
    			this.moduleTypeDic = [{ value: 2, label: this.$t('modules.moduleManage.bussinessModule') }, { value: 5, label: this.$t('modules.moduleManage.interfacetype') }]
    		} else if (data.moduleType === 2 || data.moduleType === 3) {
    			this.moduleTypeDic = [{ value: 3, label: this.$t('modules.moduleManage.menuModule') }, { value: 4, label: this.$t('modules.moduleManage.btnModule') }]
    		} else {
    			this.moduleTypeDic = []
    		}
    		this.dataSourceRow.moduleType = ''
	    },
	    /* 新增子系统或者子模块 */
	    submitForm () {
	    	this.$refs['dataSourceRow'].validate((valid) => {
			    if (valid) {
                    var that = this
                    var urlH = '/dev-basp-system/module/add'
                    var param = {
                        moduleDesc: this.dataSourceRow.moduleDesc,
		                moduleCode: this.dataSourceRow.moduleCode,
		                moduleId: this.dataSourceRow.moduleId,
		                moduleName: this.dataSourceRow.moduleName,
		                moduleIcon: this.dataSourceRow.moduleIcon,
                		sort: this.dataSourceRow.sort,
		                parentId: this.dataSourceRow.parentId,
		                subsysCode: this.dataSourceRow.subsysCode,
		                moduleType: this.dataSourceRow.moduleType,
		                actionUrl: this.dataSourceRow.actionUrl,
		                helpUrl: this.dataSourceRow.helpUrl,
		                hidden: this.dataSourceRow.hidden
                    }
                    let loadingInstance = Loading.service({ fullscreen: true })
                    this.$httpExt().post(urlH, param)
                        .then((response) => {
                            loadingInstance.close()
                            this.newlyFormVisible = false
                            this.searchModuleNode()
                            this.$message({
                                message: response.msg ? response.msg : this.$t('modules.moduleManage.saveSuccessfully'),
                                type: 'success'
                            })
                        }, (response) => {
                            loadingInstance.close()
                            Notification.error({
                                title: this.$t('common.exception'),
                                message: response.msg ? response.msg : this.$t('common.exceptionWornText')
                            })
                        })
			    } else {
                    return false
                }
            })
	    },
	    /* 修改子系统或者子模块 */
	    submitUpdate () {
	    	this.$refs['moduleForm'].validate((valid) => {
			    if (valid) {
                    var that = this
                    var urlH = '/dev-basp-system/module/update'
                    var param = {
                        moduleDesc: this.moduleForm.moduleDesc,
		                moduleCode: this.moduleForm.moduleCode,
		                moduleId: this.moduleForm.moduleId,
		                moduleName: this.moduleForm.moduleName,
		                moduleIcon: this.moduleForm.moduleIcon,
                		sort: this.moduleForm.sort,
		                parentId: this.moduleForm.parentId,
		                subsysCode: this.moduleForm.subsysCode,
		                moduleType: this.moduleForm.moduleType,
		                actionUrl: this.moduleForm.actionUrl,
		                helpUrl: this.moduleForm.helpUrl,
		                hidden: this.moduleForm.hidden
                    }
                    this.fullscreenLoading = true
                    this.$httpExt().post(urlH, param)
                        .then((response) => {
                            this.fullscreenLoading = false
                            this.resetForm('moduleForm')
                            this.$message({
					          message: response.msg ? response.msg : this.$t('modules.moduleManage.saveSuccessfully'),
					          type: 'success'
					    })
                            this.searchModuleNode()
                        }, (response) => {
                            this.fullscreenLoading = false
                            Notification.error({
                                title: this.$t('common.exception'),
                                message: response.msg ? response.msg : this.$t('common.exceptionWornText')
                            })
                        })
			    } else {
                    return false
                }
            })
	    },
	    giveupFun (val) {
	    	this.$confirm(this.$t('modules.moduleManage.giveUpEditWornTip'), this.$t('common.tip'), {
	          	confirmButtonText: this.$t('common.submitOption'),
	          	cancelButtonText: this.$t('common.cancelOption')
	        }).then(() => {
	        	this[val] = false
	        }).catch(() => {
	        })
	    }
    }
}
</script>
<style lang="less">
@import "../common/css/common.less";
.moduleManage{
	.el-collapse-item__header{
		font-weight: bold;
	}
	.operate{
		.el-checkbox__label{
			color:#fff;
		}
	}
	.moduleTree{
		max-width: 1500px;
		min-width:1050px;
		padding-top: 20px;
		.border-box{
			width:95%;
			overflow: auto;
			border: 1px solid #DCDFE6;
			border-radius: 2px;
			box-sizing: border-box;
			padding: 15px  45px 25px 25px;
			min-height: 699px;
		}
		.btn{
			text-decoration: underline;
			cursor: pointer;
		}
		.addsubSys{
			width:95%;
			border: 1px solid #DCDFE6;
			box-sizing: border-box;
			border-bottom: 0;
			height:38px;
			line-height: 38px;
			color: #606266;
			font-size: 14px;
			padding: 0px 45px  0 15px;
			.btn{
				float:right;
				padding-right: 8px;
				font-size: 12px;
				color: #409EFF;
			}
		}
		.divide .el-checkbox{
			font-size: 14px;
			color: #48576A;
			font-weight: bold;
		}
		.divide{
			width:95%;
			font-size: 14px;
			color: #48576A;
			font-weight: bold;
			margin-bottom: 10px;
		}
		.submitUpdate{
			width:95%;
			margin-top: 20px;
			text-align: right;
		}
	}
}

</style>
